import { Outlet } from "react-router-dom";

import '../App.css';
import { Cart } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom';
import '@nutui/nutui-react/dist/style.css'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
export default function Index() {
  const navigate = useNavigate();
  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: 'Fenlei',
      title: '分类',
      icon: <UnorderedListOutline />,
      badge: '5',
    },
    {
      key: 'chat',
      title: '聊天',
      icon: (active) =>
        active ? <MessageFill /> : <MessageOutline />
    },
    {
      key:'cart',
      title: '购物车',
      icon:<Cart />
    },
    {
      key: 'my',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  const selectedKey = (key) => {
    navigate(`/${key}`)
  }

  return (
    <div>
      <div>
        <Outlet></Outlet>
      </div>
      <div className='nav'>
        <TabBar>
          {tabs.map(item => (
            <TabBar.Item onClick={()=>selectedKey(item.key)} activeKey={item.key} key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}